<template>
    <div>
        <!-- 头部搜索板块 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>数据库备份与恢复</span>
                </div>
                <span class="el-icon-star-on" style="color: #e6a23c; margin-top: 10px; margin-left: 30px;">注意事项</span>
                <div class="contents">
                    <span style="margin-left: 10px; margin-top: 10px;">1. 系统默认备份一份数据库文件</span>
                    <br>
                    <span style="margin-left: 10px; margin-top: 10px;">2. 请谨慎进行数据库恢复操作</span>
                </div>
            </div>
        </div>

        <div style="margin-top: 10px; margin-left: 30px;">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-document-copy" size="small" @click="backup()">
                        备份数据库
                    </el-button>
                </el-col>
            </el-row>
        </div>

        <div style="margin-top: 20px;">
            <el-table :data="backupdb" stripe style="width: 100%;">
                <el-table-column align="center" prop="name" label="文件名" />
                <el-table-column align="center" prop="time" label="备份时间" />
                <el-table-column align="center" prop="title" label="备注信息" />
                <el-table-column align="center" prop="operation" label="操作">
                    <template slot-scope="scope">
                        <el-button style="padding: 3px;" icon="el-icon-remove-outline" type="text" size="mini" @click="deleteBackupRecord(scope.row)">删除</el-button>
                        <el-button style="padding: 3px;" icon="el-icon-refresh" type="primary" size="mini" @click="restoreBackup(scope.row)">恢复</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'DatabaseBackupIndex',
    data() {
        return {
            backupdb: {}
        }
    },
    created() {
        this.findBackupRecords()
    },
    methods: {
        backup() {
            this.getRequest('/backup/backup').then(resp => {
                if (resp) {
                    Message.success('备份成功')
                    this.findBackupRecords()
                }
            })
        },
        findBackupRecords() {
            this.getRequest('/backup/findRecords').then(resp => {
                if (resp) {
                    this.backupdb = resp.data.obj
                }
            })
        },
        deleteBackupRecord(data) {
            this.$confirm('此操作将永久删除数据库[' + data.name + ']文件,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/backup/delete', data.name).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.findBackupRecords()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        restoreBackup(data) {
            this.$confirm('此操作将按照[' + data.name + ']文件进行恢复数据库,是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var params = {name: data.name}
                this.getRequest('/backup/restore', params).then(resp => {
                    if (resp) {
                        Message.success('恢复成功')
                        this.findBackupRecords()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    //margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.title {
    font-size: 18px;
    margin-left: 30px;
    color: #337ab7;
}
.contents {
    margin-top: 10px;
    margin-left: 30px;
    //color: #e6a23c;
}
</style>
